<template>
	<view class="page">
		<!--  -->
		<s-layout title="首页" navbar="user" tabbar="/pages/index/index"  
			onShareAppMessage>
			<view :style="'top:'+phoneinfo.statusBarHeight+'px'" class="header_input" >
				<view class="home_input flex" >
					<uni-icons type="search" size="25"></uni-icons>
					<input  placeholder="请输入搜索关键词" placeholder-class="placeholder" />
				</view>
			</view>
			<view style="margin-top: 250rpx;" class="tarbarlist">
			    <view @click="selectFn(index)" :class="currentIndex==index ?'tarbarlist_item':'tarbarlist_item2' " v-for="(item,index) in tarbarlist" :key="index">{{item.name}}</view>
			</view>
			<view class="broadlist" >
				
				<view class="broadlist_item" v-for="(item,index) in categoryList" :key="index" @click="wacthFn(item)">
					<image class="broadImage" :src="item.coverImage" mode="widthFix"></image>
					<view class="broadTitle">{{item.roomTitle}}</view>
				</view>
				
			</view>
			<view style="text-align: center;font-size: 26rpx;">到底了</view>
			
			
		</s-layout>
	</view>
	
</template>

<script setup>
	import {
		computed,
		ref
	} from 'vue';
	import {
		onLoad,
		onShow,
		onPageScroll,
		onPullDownRefresh,
		onReachBottom,
		onShareAppMessage
	} from '@dcloudio/uni-app';
	import sheep from '@/sheep';
      const tarbarlist=ref([])
	  tarbarlist.value=[
		  {name:'热门'},
		  {name:'唱歌'},
		  {name:'颜值'},
		  {name:'新秀'},
		  {name:'舞蹈'},
		  {name:'聊天'},
	  ]
	  const currentIndex=ref(0)
	  
	  
	const categoryList = ref([])
	const categoryList1 = ref([])
	const categoryList2 = ref([])
	const categoryList3 = ref([])
	const phoneinfo=ref({
		windowHeigth:'',
		statusBarHeight:'',
	})
	categoryList.value=[
		{
			coverImage:"../../static/a2.png",
			userImage:"../../static/a2.png",
			roomTitle:'美女主播',
			status:'1',
			url:'https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/1117/AI%E5%A5%B3%E5%BC%BA%E4%BA%BA%EF%BD%9E_31232213890_2023-11-16_233204_%E8%BD%AC%E7%A0%81.mp4'
		},
		{
			coverImage:"../../static/a4.png",
			userImage:"../../static/a2.png",
			roomTitle:'美女主播',
			status:'1',
			url:'https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/1117/a4.mp4'
		},
		{
			coverImage:"../../static/a5.png",
			userImage:"../../static/a5.png",
			roomTitle:'夜晚注册',
			status:'1',
			url:'https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/1117/a5.mp4'
		},
		{
			coverImage:"../../static/a6.png",
			userImage:"../../../static/a6.png",
			roomTitle:'美女主播',
			status:'1',
			url:'https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/1117/%E7%99%BD%E5%8F%AF%E5%84%BF1_37569212066_2023-11-17_122028_%E8%BD%AC%E7%A0%81.mp4'
		},
		{
			coverImage:"../../static/a7.png",
			userImage:"../../../static/a7.png",
			roomTitle:'樱花树下',
			status:'1',
			url:'https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/1117/a7.mp4'
		},
		{
			coverImage:"../../static/a8.png",
			userImage:"../../../static/a8.png",
			roomTitle:'仙气满满小仙女',
			status:'1',
			url:'https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/1117/a8.mp4'
		},
		{
			coverImage:"../../static/a9.png",
			userImage:"../../../static/a9.png",
			roomTitle:'仙气满满小仙女',
			status:'1',
			url:'https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/1117/a9.mp4'
		},
		{
			coverImage:"../../static/a10.png",
			userImage:"../../../static/a10.png",
			roomTitle:'进来听歌',
			status:'1',
			url:'https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/1117/a10.mp4'
		},
		{
			coverImage:"../../static/a11.png",
			userImage:"../../../static/a11.png",
			roomTitle:'进来聊天',
			status:'1',
			url:'https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/1117/a11.mp4'
		},
		{
			coverImage:"../../static/a12.png",
			userImage:"../../../static/a12.png",
			roomTitle:'麻电少女',
			status:'1',
			url:'https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/1117/%E9%BA%BB%E7%94%B5%E5%B0%91%E5%A5%B3_xxhhh967_2023-11-16_233200_%E8%BD%AC%E7%A0%81.mp4'
		},
	]
	categoryList1.value=[
		
		{
			coverImage:"../../static/a9.png",
			userImage:"../../../static/a9.png",
			roomTitle:'仙气满满小仙女',
			status:'1',
			url:'https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/1117/a9.mp4'
		},
		{
			coverImage:"../../static/a10.png",
			userImage:"../../../static/a10.png",
			roomTitle:'进来听歌',
			status:'1',
			url:'https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/1117/a10.mp4'
		},
		{
			coverImage:"../../static/a11.png",
			userImage:"../../../static/a11.png",
			roomTitle:'进来聊天',
			status:'1',
			url:'https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/1117/a11.mp4'
		},
		{
			coverImage:"../../static/a12.png",
			userImage:"../../../static/a12.png",
			roomTitle:'麻电少女',
			status:'1',
			url:'https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/1117/%E9%BA%BB%E7%94%B5%E5%B0%91%E5%A5%B3_xxhhh967_2023-11-16_233200_%E8%BD%AC%E7%A0%81.mp4'
		},
		
		{
			coverImage:"../../static/2.jpeg",
			userImage:"../../../static/2.jpeg",
			roomTitle:'烟火星光',
			status:'2',
			url:''
		},
		
	]
	categoryList3.value=[
		{
			coverImage:"../../static/a6.png",
			userImage:"../../../static/a6.png",
			roomTitle:'美女主播',
			status:'1',
			url:'https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/1117/%E7%99%BD%E5%8F%AF%E5%84%BF1_37569212066_2023-11-17_122028_%E8%BD%AC%E7%A0%81.mp4'
		},
		{
			coverImage:"../../static/a7.png",
			userImage:"../../../static/a7.png",
			roomTitle:'樱花树下',
			status:'1',
			url:'https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/1117/a7.mp4'
		},
		{
			coverImage:"../../static/a8.png",
			userImage:"../../../static/a8.png",
			roomTitle:'仙气满满小仙女',
			status:'1',
			url:'https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/1117/a8.mp4'
		},
		{
			coverImage:"../../static/a9.png",
			userImage:"../../../static/a9.png",
			roomTitle:'仙气满满小仙女',
			status:'1',
			url:'https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/1117/a9.mp4'
		},
		{
			coverImage:"../../static/a10.png",
			userImage:"../../../static/a10.png",
			roomTitle:'进来听歌',
			status:'1',
			url:'https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/1117/a10.mp4'
		},
		{
			coverImage:"../../static/a11.png",
			userImage:"../../../static/a11.png",
			roomTitle:'进来聊天',
			status:'1',
			url:'https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/1117/a11.mp4'
		},
	]
	categoryList1.value=[
		
		{
			coverImage:"../../static/a5.png",
			userImage:"../../static/a5.png",
			roomTitle:'夜晚注册',
			status:'1',
			url:'https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/1117/a5.mp4'
		},
		{
			coverImage:"../../static/a6.png",
			userImage:"../../../static/a6.png",
			roomTitle:'美女主播',
			status:'1',
			url:'https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/1117/%E7%99%BD%E5%8F%AF%E5%84%BF1_37569212066_2023-11-17_122028_%E8%BD%AC%E7%A0%81.mp4'
		},
		{
			coverImage:"../../static/a7.png",
			userImage:"../../../static/a7.png",
			roomTitle:'樱花树下',
			status:'1',
			url:'https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/1117/a7.mp4'
		},
		{
			coverImage:"../../static/a8.png",
			userImage:"../../../static/a8.png",
			roomTitle:'仙气满满小仙女',
			status:'1',
			url:'https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/1117/a8.mp4'
		},
	]
	categoryList2.value=[
		
		{
			coverImage:"../../static/a8.png",
			userImage:"../../../static/a8.png",
			roomTitle:'仙气满满小仙女',
			status:'1',
			url:'https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/1117/a8.mp4'
		},
		{
			coverImage:"../../static/a9.png",
			userImage:"../../../static/a9.png",
			roomTitle:'仙气满满小仙女',
			status:'1',
			url:'https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/1117/a9.mp4'
		},
		{
			coverImage:"../../static/a10.png",
			userImage:"../../../static/a10.png",
			roomTitle:'进来听歌',
			status:'1',
			url:'https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/1117/a10.mp4'
		},
	]
	

	// 隐藏原生tabBar
	uni.hideTabBar();

	
	onLoad((options) => {
		let res = uni.getSystemInfoSync();
		phoneinfo.value.windowHeigth = res.windowHeight;
		phoneinfo.value.statusBarHeight = res.statusBarHeight;
		console.log(categoryList.value);
	});
	onShow(()=>{
		// getroomlist()
	})
	
	//获取=直播列表
	const getroomlist=()=>{
		sheep.$api.login.liveroomlist().then(res=>{
			console.log(res);
			categoryList.value=res.rows
		})
	}
	
	const natTo=()=>{
		uni.navigateTo({
			url:"/pages/index/broadcast/createroom"
		})
	} 
	
	
	const wacthFn=(item)=>{
		let params = encodeURIComponent(JSON.stringify(item))
		uni.navigateTo({
			url:'/pages/index/broadcast/watchroom?params='+params
		})
	}
	
	const selectFn=(item)=>{
		console.log(item);
		currentIndex.value=item
		if(item==1){
			categoryList.value=categoryList1.value
		}else if(item==2|| item==4){
			categoryList.value=categoryList2.value
		}else{
			categoryList.value=categoryList3.value
		}
	}
	
	
	// 下拉刷新
	onPullDownRefresh(() => {
		// sheep.$store('app').init();
		// setTimeout(function() {
		// 	uni.stopPullDownRefresh();
		// }, 800);
	});
	// 上拉加载更多
	onReachBottom(() => {
		// 该事件必须申明,子组件才会触发该事件
	})
	onPageScroll(() => {});

	
	
</script>

<style lang="scss" scoped>

	.page{
		position: relative;
	}
	//直播主页
	.flex{
		display: flex;
		align-items: center;
	}
	.home_input{
		padding:20rpx 30rpx;
		background-color: #f7f7f7;
		border-radius: 50rpx;
	}
	.placeholder{
		font-size: 28rpx;
	}
	.header_input{
	     position: fixed;
		 width: 750rpx;
		 background-color: #fff;
		 padding:20rpx;
		 z-index: 99999;
	}
	.tarbarlist{
		background-color: #fff;
		padding: 20rpx ;
	}
	.tarbarlist_item{
		color: #fff;
		display:inline-block;
		padding:6rpx 14rpx;
		border-radius: 8rpx;
		background-color: #ff7115;
		margin-right: 30rpx;
	}
	.tarbarlist_item2{
		color: #afafaf;
		display:inline-block;
		padding:6rpx 14rpx;
		border-radius: 8rpx;
		margin-right: 30rpx;
	}
	//直播列表
	.broadlist{
		margin:30rpx 20rpx 30rpx 20rpx;
		padding: 20rpx;
		column-count:2;
		-moz-column-count:2; /* Firefox */
		-webkit-column-count:2; /* Safari and Chrome */
		column-gap:30rpx;
	
	}
	
		
	.broadImage{
		border-radius: 30rpx;
		width: 100%;
	}
	
	.broadlist_item{
		break-inside: avoid; /*防止断点*/
		// width: 50%;
		padding:10rpx;
		border-radius: 30rpx ;
		background-color: #fff;
		margin-bottom: 20rpx;
	}
	.broadTitle{
		font-size: 28rpx;
		padding:10rpx 20rpx;
	}
</style>
